<template>
    <span @click.stop="onchange" :class="[ds[kw]?'active':'','mine-radio']">
    	<i></i>
    </span>
</template>
<script>
    export default {
    	data:function(){
    		return{
    			status: this.data||false
    		}
    	},
    	props:{
    		initStatus:{
    			type:Boolean,
    			default:false
    		},
    		/*数据源*/
    		ds:{
    			type: Object
    		},
    		/*key*/
    		kw:[String,Number],
    		/*所属的集合*/
    		path:[String,Number,Object,Array],
    		/*回调*/
    		change:{
    			type: Function,
    			required: true
    		},
    		data:{
    			type:Boolean,
    			default:false
    		}
    	},
    	methods:{
    		onchange(){
    			let { ds, kw, change, path } = this;
    			Object.keys(ds).forEach(item=>{
    				ds[item] = false;
    			});
    			ds[kw] = true;
    			change(ds, path, kw);
    		}
    	}
    };
    
</script>
<style lang="css">
.mine-radio{
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	border: solid 1px #cccccc;
	vertical-align: bottom;
	overflow: hidden;
	cursor: pointer;
}
.mine-radio.active{
	border: none;
}
.mine-radio i{
	display: inline-block;
	background: #FFFFFF;
	height: 20px;
	width: 20px;
	border: solid 6px #2dbe60;
	border-radius: 50%;
	float: left;
	opacity: 0;
}
.mine-radio.active i{
	opacity: 1;
}
</style>
